<template>
  <div class="test">
    <vueCropper class="uploadwrapper"
                ref="cropper"
                :img="example2.img"
                :outputSize="example2.size"
                :outputType="example2.outputType"
                :info="example2.info"
                :canScale="example2.canScale"
                :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.autoCropWidth"
                :autoCropHeight="example2.autoCropHeight"
                :fixed="example2.fixed"
                :fixedNumber="example2.fixedNumber"
    ></vueCropper>
    <div class="buttons">
      <label class="btn" for="uploads">upload</label>
      <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
             accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">

      <button @click="finish('base64')" class="btn">preview(base64)</button>
      <button @click="finish('blob')" class="btn">preview(blob)</button>

      <div class="show-preview"
           :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
        <div :style="previews.div">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import VueCropper from 'vue-cropper';
  import {URI_UPLOAD} from 'src/const/uri'

  export default {
    name: "test",
    data() {
      return {
        example2: {
          img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
          info: true,
          size: 1,
          outputType: 'jpeg',
          canScale: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 500,
          autoCropHeight: 250,
          // 开启宽度和高度比例
          fixed: true,
          fixedNumber: [2, 1],
        },
        formData: new FormData(),
        previews: {},
        fileName:''
      }
    },
    components: {VueCropper},
    methods: {
      uploadImg(e, num) {
        var that =this;
        //上传图片
        // this.option.img
        var file = e.target.files[0];
        //console.log(file);
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
          return false
        }
        var reader = new FileReader()
        reader.onload = (e) => {
          let data
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          } else {
            data = e.target.result
          }
          if (num === 1) {
            console.log(file.name);
            that.fileName=file.name;
            this.example2.img = data
          } else if (num === 2) {
            this.example2.img = data
          }
        }
        // 转化为base64
        //reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file)
      },
      finish(type) {
        var that = this;
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            var blob = data;
            let file = new File([blob], that.fileName);
            that.formData.append('file', file);
            this.$ajax.uploadForm(URI_UPLOAD, {}, res => {
              console.log(res);
            }, error => {
            }, this.formData);
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            //test.location.href = data


            console.log(data);
          })
        }
      }
    }
  }
</script>

<style scoped>
  .test {
    width: 600px;
    height: 300px;
  }

  .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
  }
</style>